<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>TurboJS</title>

  <script type="text/javascript" src="js/turbo.js"></script>
  <script type="text/javascript" src="js/tracking.js"></script>
	<link rel="stylesheet" type="text/css" href="css/turbo.css" />

<style type="text/css">

body {
	font-family: Lucida;
}

form label {
	width: 150px;
}
h1#logo {
	font-family: Georgia;
	float: left;
	font-size: 5em;
	color: #990000;
	margin: 0;
}

br.clearFloat, li.clearFloat {
	display:block !important;
	float:none !important;
	height:0 !important;
	line-height:0 !important;
	font-size:1px !important;
	clear:both !important;
}


/* Accordion */
#accordion {
  border: 1px solid #900;
}
#accordion .toggle {
  background-color: #900;
  color: #CACACA;
  font-weight: 100;
  margin: 0;
  padding: 5px 10px;
  border-bottom: 2px solid #111;
}
#accordion .element {
  padding: 0;
  margin: 0;
/*  padding: 5px 20px; */
}

/* Carousel */
#carousel {
  width: 690px;
  margin: 0 auto;
  height: 200px;
}


</style>
    </head>
    <body style="background: white">

<div><h1 id="logo">Turbo</h1><img src="turbojs.png" alt="TurboJS" title="Tiny Javascript Framework" /><br class="clearFloat" /></div>
<p style="width: 300px; text-align: center; margin: 0;"><em>Tiny Javascript Framework</em></p>

<!-- ACCORDION -->
<h1>Accordion</h1>

<div id="accordion">

<h2 class="toggle">Lipsum</h2>
<p class="element">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum pellentesque ultrices odio. Suspendisse eu augue. Morbi bibendum mauris at leo. Curabitur egestas viverra ligula. Praesent egestas ullamcorper elit. Maecenas et sem. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris suscipit viverra neque. Nam et magna quis massa sagittis feugiat. Proin ut lacus quis augue pulvinar ornare. </p>

<h2 class="toggle">Lipsum 2</h2>
<p class="element">Proin in ligula. Praesent eu diam. Nam vitae pede eget ante iaculis blandit. Donec auctor vehicula lacus. Nullam feugiat sodales justo. Aenean ut diam vitae eros suscipit commodo. Donec tempor euismod eros. Praesent suscipit malesuada est. Praesent cursus, lorem ac convallis faucibus, ligula sapien pulvinar dui, eu rutrum nibh nulla et mi. Fusce elit sapien, faucibus sit amet, feugiat vitae, ullamcorper id, dui. Curabitur eros mi, interdum ac, aliquet id, molestie rutrum, metus. Vivamus mauris libero, auctor vel, facilisis vitae, feugiat vitae, dui. Vestibulum blandit porttitor tortor. Vestibulum sed ligula. Proin tristique pretium tellus. Morbi interdum, turpis nec fringilla suscipit, ante leo mollis purus, at scelerisque dolor magna tincidunt velit.</p>

<h2 class="toggle">Lipsum 3</h2>
<p class="element">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum pellentesque ultrices odio. Suspendisse eu augue. Morbi bibendum mauris at leo. Curabitur egestas viverra ligula. Praesent egestas ullamcorper elit. Maecenas et sem. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris suscipit viverra neque. Nam et magna quis massa sagittis feugiat. Proin ut lacus quis augue pulvinar ornare. </p>

<h2 class="toggle">Lipsum 4</h2>
<p class="element">Proin in ligula. Praesent eu diam. Nam vitae pede eget ante iaculis blandit. Donec auctor vehicula lacus. Nullam feugiat sodales justo. Aenean ut diam vitae eros suscipit commodo. Donec tempor euismod eros. Praesent suscipit malesuada est. Praesent cursus, lorem ac convallis faucibus, ligula sapien pulvinar dui, eu rutrum nibh nulla et mi. Fusce elit sapien, faucibus sit amet, feugiat vitae, ullamcorper id, dui. Curabitur eros mi, interdum ac, aliquet id, molestie rutrum, metus. Vivamus mauris libero, auctor vel, facilisis vitae, feugiat vitae, dui. Vestibulum blandit porttitor tortor. Vestibulum sed ligula. Proin tristique pretium tellus. Morbi interdum, turpis nec fringilla suscipit, ante leo mollis purus, at scelerisque dolor magna tincidunt velit.</p>

<h2 class="toggle">Long Div</h2>
<div class="element" style="">
	<h3>LOREM IPSUM</h3>

	<h3>DOLOR SIT AMET</h3>

	<p>Suspendisse aliquam ante a nisi. Pellentesque in justo. Curabitur sed arcu. Etiam est purus, dictum ac, ullamcorper a, vestibulum sed, ipsum. Vivamus mollis consectetuer turpis. Ut sollicitudin, nunc quis molestie sollicitudin, dui urna fringilla mi, et lobortis urna nibh ut neque. Proin id nibh. Nulla cursus mollis libero. Fusce in est. Maecenas tempus. Integer id mauris. Ut ut quam. Nunc fringilla erat sed quam. Sed libero. Morbi eu tortor. Mauris non ligula in magna tincidunt pretium. Pellentesque et eros. Curabitur pellentesque scelerisque diam. Pellentesque euismod nibh vel mi. Vestibulum sit amet nibh vel lectus viverra aliquet.</p>

	<h3>LOREM IPSUM</h3>
	<p>Proin in ligula. Praesent eu diam. Nam vitae pede eget ante iaculis blandit. Donec auctor vehicula lacus. Nullam feugiat sodales justo. Aenean ut diam vitae eros suscipit commodo. Donec tempor euismod eros. Praesent suscipit malesuada est. Praesent cursus, lorem ac convallis faucibus, ligula sapien pulvinar dui, eu rutrum nibh nulla et mi. Fusce elit sapien, faucibus sit amet, feugiat vitae, ullamcorper id, dui. Curabitur eros mi, interdum ac, aliquet id, molestie rutrum, metus. Vivamus mauris libero, auctor vel, facilisis vitae, feugiat vitae, dui. Vestibulum blandit porttitor tortor. Vestibulum sed ligula. Proin tristique pretium tellus. Morbi interdum, turpis nec fringilla suscipit, ante leo mollis purus, at scelerisque dolor magna tincidunt velit.</p>

	<h3>DOLOR SIT AMET</h3>

	<p>Suspendisse aliquam ante a nisi. Pellentesque in justo. Curabitur sed arcu. Etiam est purus, dictum ac, ullamcorper a, vestibulum sed, ipsum. Vivamus mollis consectetuer turpis. Ut sollicitudin, nunc quis molestie sollicitudin, dui urna fringilla mi, et lobortis urna nibh ut neque. Proin id nibh. Nulla cursus mollis libero. Fusce in est. Maecenas tempus. Integer id mauris. Ut ut quam. Nunc fringilla erat sed quam. Sed libero. Morbi eu tortor. Mauris non ligula in magna tincidunt pretium. Pellentesque et eros. Curabitur pellentesque scelerisque diam. Pellentesque euismod nibh vel mi. Vestibulum sit amet nibh vel lectus viverra aliquet.</p>

	<h3>LOREM IPSUM</h3>
	<p>Proin in ligula. Praesent eu diam. Nam vitae pede eget ante iaculis blandit. Donec auctor vehicula lacus. Nullam feugiat sodales justo. Aenean ut diam vitae eros suscipit commodo. Donec tempor euismod eros. Praesent suscipit malesuada est. Praesent cursus, lorem ac convallis faucibus, ligula sapien pulvinar dui, eu rutrum nibh nulla et mi. Fusce elit sapien, faucibus sit amet, feugiat vitae, ullamcorper id, dui. Curabitur eros mi, interdum ac, aliquet id, molestie rutrum, metus. Vivamus mauris libero, auctor vel, facilisis vitae, feugiat vitae, dui. Vestibulum blandit porttitor tortor. Vestibulum sed ligula. Proin tristique pretium tellus. Morbi interdum, turpis nec fringilla suscipit, ante leo mollis purus, at scelerisque dolor magna tincidunt velit.</p>

	<h3>DOLOR SIT AMET</h3>

	<p>Suspendisse aliquam ante a nisi. Pellentesque in justo. Curabitur sed arcu. Etiam est purus, dictum ac, ullamcorper a, vestibulum sed, ipsum. Vivamus mollis consectetuer turpis. Ut sollicitudin, nunc quis molestie sollicitudin, dui urna fringilla mi, et lobortis urna nibh ut neque. Proin id nibh. Nulla cursus mollis libero. Fusce in est. Maecenas tempus. Integer id mauris. Ut ut quam. Nunc fringilla erat sed quam. Sed libero. Morbi eu tortor. Mauris non ligula in magna tincidunt pretium. Pellentesque et eros. Curabitur pellentesque scelerisque diam. Pellentesque euismod nibh vel mi. Vestibulum sit amet nibh vel lectus viverra aliquet.</p>

	<h3>DOLOR SIT AMET</h3>

	<p>Suspendisse aliquam ante a nisi. Pellentesque in justo. Curabitur sed arcu. Etiam est purus, dictum ac, ullamcorper a, vestibulum sed, ipsum. Vivamus mollis consectetuer turpis. Ut sollicitudin, nunc quis molestie sollicitudin, dui urna fringilla mi, et lobortis urna nibh ut neque. Proin id nibh. Nulla cursus mollis libero. Fusce in est. Maecenas tempus. Integer id mauris. Ut ut quam. Nunc fringilla erat sed quam. Sed libero. Morbi eu tortor. Mauris non ligula in magna tincidunt pretium. Pellentesque et eros. Curabitur pellentesque scelerisque diam. Pellentesque euismod nibh vel mi. Vestibulum sit amet nibh vel lectus viverra aliquet.</p>

	<h3>LOREM IPSUM</h3>
	<p>Proin in ligula. Praesent eu diam. Nam vitae pede eget ante iaculis blandit. Donec auctor vehicula lacus. Nullam feugiat sodales justo. Aenean ut diam vitae eros suscipit commodo. Donec tempor euismod eros. Praesent suscipit malesuada est. Praesent cursus, lorem ac convallis faucibus, ligula sapien pulvinar dui, eu rutrum nibh nulla et mi. Fusce elit sapien, faucibus sit amet, feugiat vitae, ullamcorper id, dui. Curabitur eros mi, interdum ac, aliquet id, molestie rutrum, metus. Vivamus mauris libero, auctor vel, facilisis vitae, feugiat vitae, dui. Vestibulum blandit porttitor tortor. Vestibulum sed ligula. Proin tristique pretium tellus. Morbi interdum, turpis nec fringilla suscipit, ante leo mollis purus, at scelerisque dolor magna tincidunt velit.</p>

	<h3>DOLOR SIT AMET</h3>

	<p>Suspendisse aliquam ante a nisi. Pellentesque in justo. Curabitur sed arcu. Etiam est purus, dictum ac, ullamcorper a, vestibulum sed, ipsum. Vivamus mollis consectetuer turpis. Ut sollicitudin, nunc quis molestie sollicitudin, dui urna fringilla mi, et lobortis urna nibh ut neque. Proin id nibh. Nulla cursus mollis libero. Fusce in est. Maecenas tempus. Integer id mauris. Ut ut quam. Nunc fringilla erat sed quam. Sed libero. Morbi eu tortor. Mauris non ligula in magna tincidunt pretium. Pellentesque et eros. Curabitur pellentesque scelerisque diam. Pellentesque euismod nibh vel mi. Vestibulum sit amet nibh vel lectus viverra aliquet.</p>

	<h3>LOREM IPSUM</h3>
	<p>Proin in ligula. Praesent eu diam. Nam vitae pede eget ante iaculis blandit. Donec auctor vehicula lacus. Nullam feugiat sodales justo. Aenean ut diam vitae eros suscipit commodo. Donec tempor euismod eros. Praesent suscipit malesuada est. Praesent cursus, lorem ac convallis faucibus, ligula sapien pulvinar dui, eu rutrum nibh nulla et mi. Fusce elit sapien, faucibus sit amet, feugiat vitae, ullamcorper id, dui. Curabitur eros mi, interdum ac, aliquet id, molestie rutrum, metus. Vivamus mauris libero, auctor vel, facilisis vitae, feugiat vitae, dui. Vestibulum blandit porttitor tortor. Vestibulum sed ligula. Proin tristique pretium tellus. Morbi interdum, turpis nec fringilla suscipit, ante leo mollis purus, at scelerisque dolor magna tincidunt velit.</p>

	<h3>LOREM IPSUM</h3>
	<p>Proin in ligula. Praesent eu diam. Nam vitae pede eget ante iaculis blandit. Donec auctor vehicula lacus. Nullam feugiat sodales justo. Aenean ut diam vitae eros suscipit commodo. Donec tempor euismod eros. Praesent suscipit malesuada est. Praesent cursus, lorem ac convallis faucibus, ligula sapien pulvinar dui, eu rutrum nibh nulla et mi. Fusce elit sapien, faucibus sit amet, feugiat vitae, ullamcorper id, dui. Curabitur eros mi, interdum ac, aliquet id, molestie rutrum, metus. Vivamus mauris libero, auctor vel, facilisis vitae, feugiat vitae, dui. Vestibulum blandit porttitor tortor. Vestibulum sed ligula. Proin tristique pretium tellus. Morbi interdum, turpis nec fringilla suscipit, ante leo mollis purus, at scelerisque dolor magna tincidunt velit.</p>

	<h3>DOLOR SIT AMET</h3>

	<p>Suspendisse aliquam ante a nisi. Pellentesque in justo. Curabitur sed arcu. Etiam est purus, dictum ac, ullamcorper a, vestibulum sed, ipsum. Vivamus mollis consectetuer turpis. Ut sollicitudin, nunc quis molestie sollicitudin, dui urna fringilla mi, et lobortis urna nibh ut neque. Proin id nibh. Nulla cursus mollis libero. Fusce in est. Maecenas tempus. Integer id mauris. Ut ut quam. Nunc fringilla erat sed quam. Sed libero. Morbi eu tortor. Mauris non ligula in magna tincidunt pretium. Pellentesque et eros. Curabitur pellentesque scelerisque diam. Pellentesque euismod nibh vel mi. Vestibulum sit amet nibh vel lectus viverra aliquet.</p>

	<h3>DOLOR SIT AMET</h3>

	<p>Suspendisse aliquam ante a nisi. Pellentesque in justo. Curabitur sed arcu. Etiam est purus, dictum ac, ullamcorper a, vestibulum sed, ipsum. Vivamus mollis consectetuer turpis. Ut sollicitudin, nunc quis molestie sollicitudin, dui urna fringilla mi, et lobortis urna nibh ut neque. Proin id nibh. Nulla cursus mollis libero. Fusce in est. Maecenas tempus. Integer id mauris. Ut ut quam. Nunc fringilla erat sed quam. Sed libero. Morbi eu tortor. Mauris non ligula in magna tincidunt pretium. Pellentesque et eros. Curabitur pellentesque scelerisque diam. Pellentesque euismod nibh vel mi. Vestibulum sit amet nibh vel lectus viverra aliquet.</p>

	<h3>LOREM IPSUM</h3>

	<p>Proin in ligula. Praesent eu diam. Nam vitae pede eget ante iaculis blandit. Donec auctor vehicula lacus. Nullam feugiat sodales justo. Aenean ut diam vitae eros suscipit commodo. Donec tempor euismod eros. Praesent suscipit malesuada est. Praesent cursus, lorem ac convallis faucibus, ligula sapien pulvinar dui, eu rutrum nibh nulla et mi. Fusce elit sapien, faucibus sit amet, feugiat vitae, ullamcorper id, dui. Curabitur eros mi, interdum ac, aliquet id, molestie rutrum, metus. Vivamus mauris libero, auctor vel, facilisis vitae, feugiat vitae, dui. Vestibulum blandit porttitor tortor. Vestibulum sed ligula. Proin tristique pretium tellus. Morbi interdum, turpis nec fringilla suscipit, ante leo mollis purus, at scelerisque dolor magna tincidunt velit.</p>

	<h3>DOLOR SIT AMET</h3>

	<p>Suspendisse aliquam ante a nisi. Pellentesque in justo. Curabitur sed arcu. Etiam est purus, dictum ac, ullamcorper a, vestibulum sed, ipsum. Vivamus mollis consectetuer turpis. Ut sollicitudin, nunc quis molestie sollicitudin, dui urna fringilla mi, et lobortis urna nibh ut neque. Proin id nibh. Nulla cursus mollis libero. Fusce in est. Maecenas tempus. Integer id mauris. Ut ut quam. Nunc fringilla erat sed quam. Sed libero. Morbi eu tortor. Mauris non ligula in magna tincidunt pretium. Pellentesque et eros. Curabitur pellentesque scelerisque diam. Pellentesque euismod nibh vel mi. Vestibulum sit amet nibh vel lectus viverra aliquet.</p>

</div>

<h2 class="toggle last" title="Testing this long tooltip">P3</h2>
<p class="element" id="Accordion-Section3">Duis pretium blandit nibh. Pellentesque tincidunt porta urna. Nullam sollicitudin tempor mi. Integer aliquet ipsum ac dui. Duis lorem. Etiam quis tortor. Sed tincidunt cursus sapien. Aliquam facilisis diam congue risus. Praesent semper, erat congue commodo sollicitudin, nisi nunc vulputate nisi, rutrum tempus nulla lacus et orci. Vivamus ultricies leo ac felis. Morbi interdum posuere ipsum. Ut et nibh. Integer imperdiet nulla id pede. Praesent nisl. Phasellus commodo gravida odio.

Nullam pharetra justo id justo. Donec quis arcu vitae urna volutpat vulputate. Cras tincidunt commodo nisl. Ut ac dolor eu metus rutrum mattis. Maecenas ac sapien eu est laoreet ornare. Nullam quam justo, condimentum eu, congue eget, lacinia vitae, tellus. Donec elit lorem, posuere nec, tincidunt quis, vestibulum non, arcu. Nullam sit amet metus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut volutpat ipsum sit amet lacus. Sed sed quam lacinia justo semper cursus. Suspendisse bibendum metus sit amet ipsum. </p>

</div>
<script type="text/javascript">
  new Turbo.Accordion('accordion', 'toggle', 'element');
</script>

<!-- SORTABLES -->
<!--
<h1>Sortables</h1>
<ul id="sorted">
	<li class="sort">Apple</li>
	<li class="sort">Orange</li>
	<li class="sort">Banana</li>
	<li class="sort">Pineapple</li>
</ul>

<p><input type="button" onclick="DynamicSortable('Strawberry')" value="Add Dynamic Sortable" /></p>
-->

<!-- Carousel
<h1>Carousel</h1>
<div id="carousel">
  <div class="content">
  	<h3>1 DOLOR SIT AMET</h3>
  	<p>Suspendisse aliquam ante a nisi. Pellentesque in justo. Curabitur sed arcu. Etiam est purus, dictum ac, ullamcorper a, vestibulum sed, ipsum. Vivamus mollis consectetuer turpis. Ut sollicitudin, nunc quis molestie sollicitudin, dui urna fringilla mi, et lobortis urna nibh ut neque. Proin id nibh. Nulla cursus mollis libero. Fusce in est. Maecenas tempus. Integer id mauris. Ut ut quam. Nunc fringilla erat sed quam. Sed libero. Morbi eu tortor. Mauris non ligula in magna tincidunt pretium. Pellentesque et eros. Curabitur pellentesque scelerisque diam. Pellentesque euismod nibh vel mi. Vestibulum sit amet nibh vel lectus viverra aliquet.</p>
  </div>

  <div class="content">
  	<h3>2 LOREM IPSUM</h3>
  	<p>Proin in ligula. Praesent eu diam. Nam vitae pede eget ante iaculis blandit. Donec auctor vehicula lacus. Nullam feugiat sodales justo. Aenean ut diam vitae eros suscipit commodo. Donec tempor euismod eros. Praesent suscipit malesuada est. Praesent cursus, lorem ac convallis faucibus, ligula sapien pulvinar dui, eu rutrum nibh nulla et mi. Fusce elit sapien, faucibus sit amet, feugiat vitae, ullamcorper id, dui. Curabitur eros mi, interdum ac, aliquet id, molestie rutrum, metus. Vivamus mauris libero, auctor vel, facilisis vitae, feugiat vitae, dui. Vestibulum blandit porttitor tortor. Vestibulum sed ligula. Proin tristique pretium tellus. Morbi interdum, turpis nec fringilla suscipit, ante leo mollis purus, at scelerisque dolor magna tincidunt velit.</p>
  </div>

  <div class="content">
  	<h3>3 DOLOR SIT AMET</h3>
  	<p>Suspendisse aliquam ante a nisi. Pellentesque in justo. Curabitur sed arcu. Etiam est purus, dictum ac, ullamcorper a, vestibulum sed, ipsum. Vivamus mollis consectetuer turpis. Ut sollicitudin, nunc quis molestie sollicitudin, dui urna fringilla mi, et lobortis urna nibh ut neque. Proin id nibh. Nulla cursus mollis libero. Fusce in est. Maecenas tempus. Integer id mauris. Ut ut quam. Nunc fringilla erat sed quam. Sed libero. Morbi eu tortor. Mauris non ligula in magna tincidunt pretium. Pellentesque et eros. Curabitur pellentesque scelerisque diam. Pellentesque euismod nibh vel mi. Vestibulum sit amet nibh vel lectus viverra aliquet.</p>
  </div>

  <div class="content">
  	<h3>4 LOREM IPSUM</h3>
  	<p>Proin in ligula. Praesent eu diam. Nam vitae pede eget ante iaculis blandit. Donec auctor vehicula lacus. Nullam feugiat sodales justo. Aenean ut diam vitae eros suscipit commodo. Donec tempor euismod eros. Praesent suscipit malesuada est. Praesent cursus, lorem ac convallis faucibus, ligula sapien pulvinar dui, eu rutrum nibh nulla et mi. Fusce elit sapien, faucibus sit amet, feugiat vitae, ullamcorper id, dui. Curabitur eros mi, interdum ac, aliquet id, molestie rutrum, metus. Vivamus mauris libero, auctor vel, facilisis vitae, feugiat vitae, dui. Vestibulum blandit porttitor tortor. Vestibulum sed ligula. Proin tristique pretium tellus. Morbi interdum, turpis nec fringilla suscipit, ante leo mollis purus, at scelerisque dolor magna tincidunt velit.</p>
  </div>

  <div class="content">
  	<h3>5 DOLOR SIT AMET</h3>
  	<p>Suspendisse aliquam ante a nisi. Pellentesque in justo. Curabitur sed arcu. Etiam est purus, dictum ac, ullamcorper a, vestibulum sed, ipsum. Vivamus mollis consectetuer turpis. Ut sollicitudin, nunc quis molestie sollicitudin, dui urna fringilla mi, et lobortis urna nibh ut neque. Proin id nibh. Nulla cursus mollis libero. Fusce in est. Maecenas tempus. Integer id mauris. Ut ut quam. Nunc fringilla erat sed quam. Sed libero. Morbi eu tortor. Mauris non ligula in magna tincidunt pretium. Pellentesque et eros. Curabitur pellentesque scelerisque diam. Pellentesque euismod nibh vel mi. Vestibulum sit amet nibh vel lectus viverra aliquet.</p>
  </div>

  <div class="content">
  	<h3>6 LOREM IPSUM</h3>
  	<p>Proin in ligula. Praesent eu diam. Nam vitae pede eget ante iaculis blandit. Donec auctor vehicula lacus. Nullam feugiat sodales justo. Aenean ut diam vitae eros suscipit commodo. Donec tempor euismod eros. Praesent suscipit malesuada est. Praesent cursus, lorem ac convallis faucibus, ligula sapien pulvinar dui, eu rutrum nibh nulla et mi. Fusce elit sapien, faucibus sit amet, feugiat vitae, ullamcorper id, dui. Curabitur eros mi, interdum ac, aliquet id, molestie rutrum, metus. Vivamus mauris libero, auctor vel, facilisis vitae, feugiat vitae, dui. Vestibulum blandit porttitor tortor. Vestibulum sed ligula. Proin tristique pretium tellus. Morbi interdum, turpis nec fringilla suscipit, ante leo mollis purus, at scelerisque dolor magna tincidunt velit.</p>
  </div>

  <div class="content">
  	<h3>7 DOLOR SIT AMET</h3>
  	<p>Suspendisse aliquam ante a nisi. Pellentesque in justo. Curabitur sed arcu. Etiam est purus, dictum ac, ullamcorper a, vestibulum sed, ipsum. Vivamus mollis consectetuer turpis. Ut sollicitudin, nunc quis molestie sollicitudin, dui urna fringilla mi, et lobortis urna nibh ut neque. Proin id nibh. Nulla cursus mollis libero. Fusce in est. Maecenas tempus. Integer id mauris. Ut ut quam. Nunc fringilla erat sed quam. Sed libero. Morbi eu tortor. Mauris non ligula in magna tincidunt pretium. Pellentesque et eros. Curabitur pellentesque scelerisque diam. Pellentesque euismod nibh vel mi. Vestibulum sit amet nibh vel lectus viverra aliquet.</p>
  </div>

  <div class="content">
  	<h3>8 LOREM IPSUM</h3>
  	<p>Proin in ligula. Praesent eu diam. Nam vitae pede eget ante iaculis blandit. Donec auctor vehicula lacus. Nullam feugiat sodales justo. Aenean ut diam vitae eros suscipit commodo. Donec tempor euismod eros. Praesent suscipit malesuada est. Praesent cursus, lorem ac convallis faucibus, ligula sapien pulvinar dui, eu rutrum nibh nulla et mi. Fusce elit sapien, faucibus sit amet, feugiat vitae, ullamcorper id, dui. Curabitur eros mi, interdum ac, aliquet id, molestie rutrum, metus. Vivamus mauris libero, auctor vel, facilisis vitae, feugiat vitae, dui. Vestibulum blandit porttitor tortor. Vestibulum sed ligula. Proin tristique pretium tellus. Morbi interdum, turpis nec fringilla suscipit, ante leo mollis purus, at scelerisque dolor magna tincidunt velit.</p>
  </div>

</div>
<a href="javascript:carousel.previous();">Previous</a> | 
<a href="javascript:carousel.gotoPage(3);">Goto Page 3</a> | 
<a href="javascript:alert(carousel.getPage())">getPage</a> | 
<a href="javascript:carousel.next();">Next</a>
-->
<script type="text/javascript">
  //var carousel = new Turbo.Carousel('carousel', 'content', { overflow: true, page: 6 });
</script>

<!-- Browser -->
<h1>Browser</h1>
<div>
  <span id="browserDetect"></span>
  /
  <span id="browserVersion"></span>
</div>
<script type="text/javascript">
  Turbo.$('browserDetect').innerHTML = Turbo.getBrowser().browser;
  Turbo.$('browserVersion').innerHTML = Turbo.getBrowser().version;

  if (Turbo.getBrowser().browser === "MSIE") {
    var version = parseFloat(Turbo.getBrowser().version);
    if (version <= 6) {
      // alert('Your browser is not supported');
    }
  }
</script>

<!-- Drag N Drop-->
<!--
<h1>Drag and Drop</h1>
        <div id="drag">Drag</div>
-->
<!--
        <div class="drag">Drag</div>
        <div class="drag">Drag</div>
        <div class="drag">Drag</div>
        <div id="drop">DROP ELEMENTS IN ME</div>
-->
<script type="text/javascript">
  //Turbo.Drag(Turbo.$('drag'));
</script>

<!-- Tooltip -->
<h1>Tooltip</h1>
<div id="tooltip-anchor">Mouseover for tooltip</div>
<script type="text/javascript">
  new Turbo.Tooltip(Turbo.$('tooltip-anchor'), '#tooltip-content');
</script>
<div id="tooltip-content" style="display: none">
  <div class="trTooltip-title">
    Title
  </div>
  <div class="trTooltip-content">
    This will appear in a tooltip
  </div>
</div>

<!-- Lightbox -->
<h1>Lightbox</h1>
<p><a href="javascript:Turbo.Lightbox.show('#lightbox-content')">Show Lightbox</a></p>
<div id="lightbox-content" style="display: none">
  <div class="trLightbox-title">
    Title
  </div>
  <div class="trLightbox-content">
    This will appear in a lightbox
  </div>
</div>

<!--
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://www.shadowbox-js.com/build/shadowbox.js"></script>
<link href="http://www.shadowbox-js.com/build/shadowbox.css" rel="stylesheet" />
-->
<script>
/*
 Shadowbox.init({
  // let's skip the automatic setup because we don't have any
  // properly configured link elements on the page
  skipSetup: true
 });
*/
</script>

<!-- Activity Indicator -->
<h1>Activity Indicator</h1>
<script type="text/javascript">
  function activityWithScrim() {
    Turbo.ActivityIndicator.show(true);
    window.setTimeout(Turbo.attach(Turbo.ActivityIndicator.hide, Turbo.ActivityIndicator), 1500);
  }
</script>
<p><a href="javascript:activityWithScrim()">Show Activity With Scrim</a></p>
<p><a href="javascript:Turbo.ActivityIndicator.show(false)">Show Activity Follow Mouse</a></p>
<p><a href="javascript:Turbo.ActivityIndicator.hide()">Hide Activity Indicator</a></p>

<!-- Notifications -->
<h1>Notifications</h1>
<p><a href="javascript:void(new Turbo.Notification('hello world', { id: 'notifyme' }))">Notify Me!</a></p>

<!-- Tracking -->
<!--
<h1>Mouse Event Tracking</h1>
<p><a id="trackMe" href="http://www.google.com">Tracking Events for this link</a></p>
-->
<script type="text/javascript">
  // Turbo.Tracking.init("json/tracking");
  // Turbo.Tracking.attach(Turbo.$('trackMe'), null, { mouseout: false });
</script>
<!--
<p><a href="javascript:Turbo.Tracking.init()">Start Tracking</a></p>
<p><a href="javascript:Turbo.Tracking.stop()">Stop Listening</a></p>
<p><a href="javascript:Turbo.Tracking.draw()">Output Data Results</a></p>
<p><a href="javascript:Turbo.Tracking.clear()">Clear Screen</a></p>
-->

<!-- Slider -->
<!--
<h1>Slider</h1>
<div id="slidearea">
	<div id="slider">+</div>
</div>
-->

<!-- Cryptography 
<h1>JS Cryptography</h1>
<p>
Enter text: <input type="text" name="ee" id="e1e" value="Encrypt Me" />
<input type="button" value="Click to Encrypt &raquo;" onclick="Turbo.$('Encrypt').value=Turbo.Cryptography(Turbo.$('e1e').value, 'secretPassword')" />
<input type="text" id="Encrypt" name="encrypt" />
</p>
-->

    </body>
</html>
